<template>
  <div class="news_bg">
    <!-- 上方图片 -->
    <el-image :src='url' :fit='fit'></el-image>

    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item ><a href="/">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item>新闻中心</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider ></el-divider>

    <div class="news" v-for="item in tableData" :key="item.id">
      <el-image :src="item.url" fit='fill'><P slot='error'>暂无图片</P></el-image>
      <div class="new_info">
        <p>
          <span>作品名：{{item.title}}</span>
        </p>
        <p>
          <span>简介：{{item.info}}</span>
        </p>
        <p>
          <span>作者：{{item.author}}</span>
        </p>
        <!--<p>
          <span>日期：{{item.date}}</span>
        </p>-->
        
      </div>
    </div>

    <el-pagination
      :page-size="3"
      layout="prev, pager, next"
      :total="total"
      >
    </el-pagination>




  </div>
</template>

<script>
  import nameImg from '@/assets/introuctedBG.jpg'
  export default {
    data() {
      return {
      	queryInfo: {
        pageNo: 1,
        // 当前每页显示多少条数据
        pageSize: 5
      },
        fit: 'fill',
        url: nameImg,
        total: 10,
        tableData: []
      }
    },
    created() {
    this.gettableData()
  },
  methods: {
  	async gettableData() {
     const { data: res } = await this.$http.get('news/newsList', {
            params: this.queryInfo
        })

        if (res.code !== 200) {
            return this.$message.error('获取新闻列表失败！')
        }
        this.tableData = res.data.info
        this.total = res.data.total
        console.log(this.tableData)
    },
  },
  }
</script>

<style>

  .news_bg {
    height: 1500px;
    width: 100%;
/*    background: url(../../assets/bg1.jpg) no-repeat;
    background-size: 100% 1000px; */
  }
  .news_bg .el-image {
    width: 100%;
    height: 37%;
    max-height: 370px;
    margin-top: 0%;
    margin-left: 0%;

  }

  .news_bg .el-breadcrumb{
    margin: 30px 15%;
    font-size: 14px;
  }
  .news_bg .el-divider {

    background: rgb(20,94,11);
    width: 88%;
    margin-left: 6%;

  }
  .news_bg .news{
    height: 20%;
    width: 80%;
    margin-left: 13%;
    /* background: #409EFF; */
  }
  .news_bg .news .el-image{
    height: 90%;
    width: 35%;
    margin: 1.2% 2%;
  }
  .news_bg .news .new_info{
    height: 90%;
    width: 55%;
    margin-top: -20%;
    margin-left: 50%;
    /* background: #8F8F8F; */

  }
  .news_bg .el-pagination{
    width: 50%;
    text-align: center;
    margin-left: 25%;
    /* size: 40px; */
    /* background: #409EFF; */
  }

/*  .main_body .el-table{
    background-color: transparent;
    color: #FFFFFF;
    font-size: 18px;
    width: 70%;
    left: 15%;
  }
  .el-table, .el-table__expanded-cell {
      background-color: transparent;
  }

  .el-table th, .el-table tr {
      background-color: transparent;
  }
  .el-table__body tr:hover > td{
      background-color:#303133 !important;
  } */
</style>
